<template>
  <div>
    <common-header :headNav="headNav"></common-header>
    <div class="main" style="min-height: 500px">
      <div class="container">
        <div class="rt_head">
          <span class="rt_h_title">&nbsp;</span>
          <div class="rt_h_box">
            <div class="rt_h_big" :style="{width:progress+ '%'}"></div>
          </div>
          <span class="rt_num"><span class="cprimary">{{page.current}}</span>/{{page.pages}}</span>
          <div class="float_right">
            <div class="fr_box"  @click="goError">
              <img src="/static/img/exam/exam-fanhui.png" alt="">
              <p class="fr_b_font">返回错题本</p>
            </div>
            <div class="fr_box" @click="remove(list[0].id)" ><img  src="/static/img/exam/exam-delete.png"  alt="">
              <p class="fr_b_font">移除试题</p>
            </div>
          </div>
        </div>
        <div class="rt_con"   v-for="(item,index) in list" :key="index">
          <div class="rt_topic"><span class="rt_t_title">{{getQuesType(item.qstType)}}
            <span class="rt_t_br" v-if="item.qstType == '1'">（每题备选答案中，只有一个为正确答案。错选、不选均不得分）</span>
            <span class="rt_t_br" v-if="item.qstType == '2'">（每题备选答案中，有两个或两个以上为正确答案。多选、少选、错选、不选均不得分）</span>
            <span class="rt_t_br" v-if="item.qstType == '3'">（判断每小题的表述是否正确。选错、不选均不得分）</span>
            <span class="rt_t_br" v-if="item.qstType == '4'">（根据题干，将空补充完整。有错别字、不填、漏字等均不得分）</span>
          </span></div> <!---->
          <div>
            <div class="rt_topic_num">
              <div class="float_left num_topic">1</div>
              <div class="float_right">
<!--                <div class="float_left dia_love"><img
                    src=""
                    class="dia_err_img">纠错
                </div>-->
                <div class="float_left dia_love" v-if="item.favFlag =='2'" @click="removeFav(item)">
                  <div class="love_bg love_bg_ed"></div>
                    已收藏
                </div>
                <div class="float_left dia_love" v-if="item.favFlag =='1'" @click="saveFav(item)">
                  <div class="love_bg"></div>
                  收藏
                </div>
              </div>
              <div class="clear_b"></div>
            </div>
            <div class="rt_topic_con" v-if="item.qstType===1 || item.qstType===2">
              <div class="cm_t_title" v-html="item.qstContent"></div>
              <div class="cm_options">
                <div class="cm_op_box" v-for="(option,index) of toObject(item.optionList)" :key="index">
                  <div class="cm_op_d">{{indexToString(index)}}</div>
                  <span class="cm_op_font" v-html="option.value"></span></div>
              </div>
            </div>

            <div class="rt_topic_con" v-if="item.qstType===3">
              <div class="cm_t_title" v-html="item.qstContent"></div>
              <div class="cm_options">
                <div class="cm_op_box"  >
                  <div class="cm_op_d">A</div>
                  <span class="cm_op_font" >对</span></div>
                <div class="cm_op_box"  >
                  <div class="cm_op_d">B</div>
                  <span class="cm_op_font" >错</span></div>
              </div>
            </div>

            <div class="rt_topic_con" v-if="item.qstType===4">
              <div class="cm_t_title" v-html="item.qstContent"></div>
              <div class="cm_options">
                <div class="cm_op_box" v-for="(option,index) of item.isAsr.split(',')" :key="index" >
                  <div class="cm_op_d">({{index+1}})</div>
                  <span class="cm_op_font" >________________</span></div>
              </div>
            </div>

          </div>
          <div>
            <div>
              <div class="rt_jx">
                <div class="rt_comm_d">正确答案：<span class="rt_answer" v-html="item.isAsr"></span>
                </div>
                <!--<div class="rt_comm_d">我的答案：<span class="rt_answer rt_answer_bg">C</span>
                  <img
                      src=""
                      style="margin-top: -7px; margin-left: 20px;"> &lt;!&ndash;&ndash;&gt;</div>-->
                <!--<div class="float_right rt_r_t">做错次数<span
                    class="rc_cord_bg">2</span>;累计作答<span
                    class="rc_cord_bg1">2</span>次
                </div>-->
              </div>
              <div class="reSou">
                <!--<div class="re_s_box"><span class="re_l_mo">考点</span>:
                  <div class="re_l_con c333 bge6">听力1,强化2</div>
                </div>-->
                <div class="re_s_box"><span class="re_l_mo">解析</span>:
                  <div class="re_l_con c333" v-html="item.qstAnalyze"></div>
                </div>
                <!--<div class="re_s_box"><span class="re_l_mo ver_top">笔记</span><span
                    class="ver_top c999">:</span>
                  <div class="re_l_con re_l_con1"><textarea
                      placeholder="好记性不如烂笔头，记录试题结果和分析"
                      class="re_note"></textarea>
                    <div class="note_save">保存</div>
                  </div>
                </div>-->
              </div>
            </div> <!----></div>
          <div class="topic_btn">
<!--            <div class="btn_comm submit_btn">提交答案</div>-->
            <div class="btn_box" v-if="page.pages > 1">

              <div class="btn_comm float_right" v-if="page.current < page.pages" @click="next()">下一题</div>
              <div class="btn_comm float_right" v-if="page.current > 1"  @click="previous()">上一题</div>
              <div class="clear_b"></div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>

</template>

<script>
import commonHeader from '@/views/common/header'
import commonFooter from '@/views/common/footer'
import {getErrorquestion, removeErrorquestion,saveFavoritesqst,removeFavoritesqst} from "@/api/exam";
import { mapGetters } from "vuex";

export default {
  name: 'courseList',
  data() {
    return {
      headNav: "",
      list:[],
      current: 1,
      size: 1,
      page: {},
      progress:0
    }
  }, components: {
    commonHeader, commonFooter
  },
  methods: {
    getList() {
      if (typeof (this.studentInfo.id) == "undefined") {
        return;
      }
      let current = this.$route.query.current;
      if (typeof(current) != "undefined"){
        this.current = current
      }
      console.log(this.current)
      let params = {
        current: this.current,
        size: this.size,
        favFlag: "1"
      }
      getErrorquestion(params).then(res => {
        this.list = res.data.data.records
        this.page = res.data.data
        this.progress = this.current/this.page.pages*100
      })
    },
    indexToString(index){
      var charcode;
      return index.toString(26).split("").map(function(item,i){
        charcode = item.charCodeAt(0);
        charcode+=(charcode>=97?10:49);
        return String.fromCharCode(charcode)
      }).join("").toUpperCase();
    },
    remove(id) {
      let that = this
      this.$layer.confirm(
        "确定要删除吗？",
        {
          title: "删除试题",
          btn: ["确定", "取消"]
        },
        layerid => {
          // this.$layer.msg("执行了删除");
          removeErrorquestion(id).then(res => {
            if(that.page.pages == 1){
              this.goError()
              return;
            }
            if(that.page.current == that.page.pages){
              this.$router.push({ path: "/exam/examErrorQuestionInfo",query:{current:parseInt(this.current) - 1} });
            }
            that.getList()
          })
          this.$layer.close(layerid);
        },
        layerid => {
          this.$layer.close(layerid);
        }
      )
    },
    getQuesType(i){
      switch (i){
        case 1:
          return "单选题";
        case 2:
          return "多选题";
        case 3:
          return "判断题";
        case 4:
          return "填空题";
      }
    },
    toObject(str){
      return JSON.parse(str);
    },
    next(){
      this.$router.push({ path: "/exam/examErrorQuestionInfo",query:{current:parseInt(this.current) + 1} });
    },
    previous(){
      this.$router.push({ path: "/exam/examErrorQuestionInfo",query:{current:parseInt(this.current) - 1} });
    },
    goError(){
      this.$router.push({ path: "/uc/examRecord", query:{active:2}});
    },
    saveFav(item){
      let data = {
        qstId:item.qstId
      }
      saveFavoritesqst(data).then(res=>{
        item.favFlag = "2"
      })
    },
    removeFav(item){
      let data = {
        qstId:item.qstId
      }
      removeFavoritesqst(data).then(res=>{
        item.favFlag = "1"
      })
    }
  },
  computed: {
    ...mapGetters(["studentInfo"]),
  },
  mounted: function () {

    this.getList()
  },
  watch: {
    studentInfo: function (val, oldVal) {
      this.getList();
    }
  },
}
</script>

<style lang="scss">
.cm_t_title p {
  float: initial;
}
</style>
